import React from 'react';

import { setDocumentTitle } from  '../../components/utils';

import { Button, ButtonGroup } from '../../../../components/button/Button.jsx';

export default class ButtonPage extends React.Component{
  constructor(props){
    super(props);
    this.onClick = this.onClick.bind(this);
    setDocumentTitle('Button');

  }
  onClick(){
    console.log(12)
  }
  render(){
    return <div className={`button-page`}>
      <div className={`single-buttons`}>
        <h2>基础样式</h2>
        <Button>default</Button>
        <Button type={'primary'} onClick={this.onClick}>primary</Button>
        <Button type={'success'}>success</Button>
        <Button type={'danger'}>danger</Button>
        <Button type={'warning'}>warning</Button>
        <Button type={'info'}>info</Button>
        <Button type={'disable'}>disable</Button>
        <br/>
        <Button type={'default-hollow'}>default hollow</Button>
        <Button type={'primary-hollow'}>primary hollow</Button>
        <Button type={'success-hollow'}>success hollow</Button>
        <Button type={'danger-hollow'}>danger hollow</Button>
        <Button type={'warning-hollow'}>warning hollow</Button>
        <Button type={'info-hollow'}>info hollow</Button>
        <Button type={'disable-hollow'}>disable hollow</Button>
        <br/>
        <Button type={'ghost'}>ghost</Button>
        <h2>按钮大小</h2>
        <Button type={'primary'} size={'small'}>primary</Button>
        <Button type={'primary'} size={''}>primary</Button>
        <Button type={'primary'} size={'large'}>primary</Button>
        <h2>链接</h2>
        <Button type={'primary'} href={'https://www.baidu.com/'} target={'_blank'}>a primary</Button>
        <h2>BLOCK</h2>
        <Button type={'primary-hollow'} block={true}>block primary hollow</Button>
      </div>
      <h2>按钮组</h2>
      <div>
        <ButtonGroup>
          <Button>default</Button>
          <Button>default</Button>
          <Button>default</Button>
          <Button>default</Button>
        </ButtonGroup>
      </div>
      <div>
        <ButtonGroup size={'small'} type={'primary-hollow'}>
          <Button>primary</Button>
          <Button>primary</Button>
          <Button type={'primary'}>primary</Button>
          <Button>primary</Button>
        </ButtonGroup>
      </div>
      <div>
        <ButtonGroup type={'warning-hollow'} onClick={this.onClick} activeType={'warning'}>
          <Button type={'warning'}>warning</Button>
          <Button>warning</Button>
          <Button>warning</Button>
          <Button>warning</Button>
        </ButtonGroup>
      </div>
      <div>
        <ButtonGroup size={'large'} type={'info-hollow'}>
          <Button>info hollow</Button>
          <Button type={'info'}>info hollow</Button>
          <Button>info hollow</Button>
          <Button>info hollow</Button>
        </ButtonGroup>
      </div>

      {/*<div className="pb30 pt15 clearfix">*/}
        {/*<span className="bee-button-switch open"><span className="bee-switch-point"></span></span>*/}
        {/*<div>*/}
            {/*<span className="bee-button-group-input">*/}
                {/*<span className="bee-button bee-button-ghost"></span>*/}
                {/*<input className="bee-input" placeholder="input" />*/}
            {/*</span>*/}
        {/*</div>*/}
      {/*</div>*/}
    </div>
  }
}